<template> 
    <div class="app-container">
        <el-card class="operate-container" shadow="never">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
        </el-card>
        <div class="table-container">
            <el-table ref="returnApplyTable"
                      :data="list"
                      style="width: 100%;"
                      @selection-change="handleSelectionChange"
                      v-loading="listLoading" border>
                <el-table-column type="selection" width="60" align="center"></el-table-column>
                <el-table-column label="服务单号" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.aftersalesSn}}</template>
                </el-table-column>
                <el-table-column label="订单号 " width="100" align="center">
                    <template slot-scope="scope">{{scope.row.omsOrder.orderSn}}</template>
                </el-table-column>
                <el-table-column label="退换货类型 " width="100" align="center">
                    <template slot-scope="scope">{{scope.row.type | formatType}}</template>
                </el-table-column>
                <el-table-column label="商品名称 " width="100" align="center">
                    <template slot-scope="scope">{{scope.row.billAftersalesItem.name}}</template>
                </el-table-column>
                <el-table-column label="商品属性 " width="100" align="center">
                    <template slot-scope="scope">{{scope.row.billAftersalesItem.productAttr}}</template>
                </el-table-column>
                <el-table-column label="退换货数量 " width="100" align="center">
                    <template slot-scope="scope">{{scope.row.billAftersalesItem.nums}}</template>
                </el-table-column>
                <el-table-column label="商品价格" width="100" align="center">
                    <template slot-scope="scope">￥{{scope.row.billAftersalesItem.productPrice}}</template>
                </el-table-column>
                <el-table-column label="退换货内容" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.aftersalesContent}}</template>
                </el-table-column>
                <el-table-column label="收货信息" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.linkMan}},{{scope.row.address}},{{scope.row.linkPhone}}
                    </template>
                </el-table-column>
                <el-table-column label="申请状态" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.status | formatStatus}}</template>
                </el-table-column>
                <!--              0待平台审核 1平台已拒绝  2待买家发货 3买家已发货，待商家收货 4商家已收货  5商家已发货 6买家已收货(换货完成)-->
                <el-table-column label="工单状态" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.aftersalesStatus | formatAftersalesStatus}}</template>
                </el-table-column>
                <el-table-column label="申请时间" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.ctime | formatCreateTime}}</template>
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini" v-show="scope.row.aftersalesStatus===0" @click="confirmReturn(scope.row)">确认
                        </el-button>
                        <el-button
                                type="danger" size="mini" v-show="scope.row.aftersalesStatus===0"
                                @click="rejectReturn(scope.row)">拒绝
                        </el-button>
                        <!--                      售后类型，1=只退款，2退货退款，3换货不退款-->
                        <!--                      0待平台审核 1平台已拒绝  2待买家发货 3买家已发货，待商家收货 4商家已收货  5商家已发货 6买家已收货(换货完成)-->
                        <el-button
                                size="mini" v-show="scope.row.aftersalesStatus===3"
                                @click="confirmReceipt(scope.row)">确认收货
                        </el-button>
                        <el-button
                                size="mini" v-show="scope.row.type===3&&scope.row.aftersalesStatus===4"
                                @click="deliverGoods(scope.row)">发货
                        </el-button>
                        <el-button
                                size="mini" @click="handleViewDetail(scope.$index, scope.row)">查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="pagination-container">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes,prev, pager, next,jumper"
                    :current-page.sync="listQuery.pageNum"
                    :page-size="listQuery.pageSize"
                    :page-sizes="[5,10,15]"
                    :total="total">
            </el-pagination>
        </div>


        <!-- 卖家发货Dialog -->
        <el-dialog title="填写发货信息" :visible.sync="dialogDeliverGoodsVisible">
            <el-form :model="deliverGoodsVisibleform">

                <el-form-item label="快递公司" :label-width="formLabelWidth">
                    <el-select placeholder="请选择物流公司"
                               v-model="deliverGoodsVisibleform.sellerLogiCode"
                               size="small">
                        <el-option v-for="(item, index) in companyOptions"
                                   :label="item.express"
                                   :value="item.comCode"
                                   :key="index">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="快递单号" :label-width="formLabelWidth">
                    <el-input v-model="deliverGoodsVisibleform.sellerLogiNo" autocomplete="off" size="small"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogDeliverGoodsVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleDeliverGoods()">确 定</el-button>
            </div>
        </el-dialog>
    </div>


</template>
<script>
    import {formatDate} from '@/utils/date';
    import {deliveryOrder, getDeliveryExpressCompanyList} from '@/api/order'
    import {
        getBillAftersalesList,
        handleDeliverGoods,
        confirmReceipt,
        confirmReturn,
        rejectReturn
    } from '@/api/returnApply';

    const defaultListQuery = {
        pageNum: 1,
        pageSize: 10,
    };
    const aftersalesStatusOptions = [
        {
            label: '待平台审核',
            value: 0
        },
        {
            label: '平台已拒绝',
            value: 1
        },
        {
            label: '待买家发货',
            value: 2
        },
        {
            label: '买家已发货',
            value: 3
        },
        {
            label: '商家已收货',
            value: 4
        },
        {
            label: '商家已发货',
            value: 5
        },
        {
            label: '买家已收货',
            value: 6
        }
    ];
    // 状态 0=待处理 1=退货中 2=已完成 3=已拒绝
    const defaultStatusOptions = [
        {
            label: '待处理',
            value: 0
        },
        {
            label: '退货中',
            value: 1
        },
        {
            label: '已完成',
            value: 2
        },
        {
            label: '已拒绝',
            value: 3
        }
    ];
    export default {
        name: 'returnApplyList',
        data() {
            return {
                companyOptions: [],
                currentDeliverGoodsInfo: {},
                dialogDeliverGoodsVisible: false,
                deliverGoodsVisibleform: {
                    sellerLogiCode: '',
                    sellerLogiNo: ''
                },
                formLabelWidth: '80px',
                listQuery: Object.assign({}, defaultListQuery),
                statusOptions: Object.assign({}, defaultStatusOptions),
                list: null,
                total: null,
                listLoading: false,
                multipleSelection: [],
                operateType: 1,
            }
        },
        created() {
            this.getList();
            this.getDeliveryExpressCompanyList();
        },
        filters: {
            formatCreateTime(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            },
            formatType(type) {
                if (type === 2) {
                    return "退货"
                }
                if (type === 3) {
                    return "换货"
                }
            },
            formatAftersalesStatus(aftersalesStatus) {
                for (let i = 0; i < aftersalesStatusOptions.length; i++) {
                    if (aftersalesStatus === aftersalesStatusOptions[i].value) {
                        return aftersalesStatusOptions[i].label;
                    }
                }
            },
            formatStatus(status) {
                for (let i = 0; i < defaultStatusOptions.length; i++) {
                    if (status === defaultStatusOptions[i].value) {
                        return defaultStatusOptions[i].label;
                    }
                }
            },
            formatReturnAmount(row) {
                return row.productRealPrice * row.productCount;
            }
        },
        methods: {
            getDeliveryExpressCompanyList() {
                getDeliveryExpressCompanyList({}).then(response => {
                    this.companyOptions = response.data;
                });
            },
            handleViewDetail(index, row) {
                this.$router.push({path: '/oms/returnApplyDetail', query: {id: row.aftersalesId}})
            },
            rejectReturn(row) {
                this.$prompt('请输入拒绝理由', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(({value}) => {
                    // 调用接口-拒绝退换货
                    rejectReturn({aftersalesId: row.aftersalesId, remark: value}).then(response => {
                        this.$message({
                            type: 'success',
                            message: '确认收货成功'
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });

            },
            confirmReturn(row) {
                this.$prompt('请输入备注', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(({value}) => {
                    // 调用接口-确认退换货
                    confirmReturn({aftersalesId: row.aftersalesId, remark: value}).then(response => {
                        this.$message({
                            type: 'success',
                            message: '确认退换货成功'
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });

            },

            confirmReceipt(row) {
                this.$prompt('请输入确认收货备注', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(({value}) => {
                    // 调用接口-确认收货
                    confirmReceipt({aftersalesId: row.aftersalesId, remark: value}).then(response => {
                        this.$message({
                            type: 'success',
                            message: '确认收货成功'
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });
            },
            deliverGoods(row) {
                this.dialogDeliverGoodsVisible = true
                this.currentDeliverGoodsInfo = row
            },
            handleDeliverGoods() {
                //  校验参数
                if (this.deliverGoodsVisibleform.sellerLogiCode === "") {
                    this.$message({
                        message: '物流公司不能为空！',
                        type: 'warning'
                    });
                    return false;
                }
                if (this.deliverGoodsVisibleform.sellerLogiNo === "") {
                    this.$message({
                        message: '物流单号不能为空！',
                        type: 'warning'
                    });
                    return false;
                }
                console.log("调用发货接口")
                // 调用发货接口
                handleDeliverGoods({
                    aftersalesId: this.currentDeliverGoodsInfo.aftersalesId,
                    sellerLogiCode: this.deliverGoodsVisibleform.sellerLogiCode,
                    sellerLogiNo: this.deliverGoodsVisibleform.sellerLogiNo
                }).then(response => {
                    this.dialogDeliverGoodsVisible = false
                    this.$message({
                        type: 'success',
                        message: '确认收货成功'
                    });
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // handleResetSearch() {
            //     this.listQuery = Object.assign({}, defaultListQuery);
            // },
            // handleSearchList() {
            //     this.listQuery.pageNum = 1;
            //     this.getList();
            // },
            // handleViewDetail(index, row) {
            //     this.$router.push({path: '/oms/returnApplyDetail', query: {id: row.id}})
            // },
            handleSizeChange(val) {
                this.listQuery.pageNum = 1;
                this.listQuery.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getList();
            },
            getList() {
                this.listLoading = true;
                getBillAftersalesList(this.listQuery).then(response => {
                    this.listLoading = false;
                    this.list = response.data.records;
                    this.total = response.data.total;
                });
            }
        }
    }
</script>
<style scoped>
    .input-width {
        width: 203px;
    }
</style>


